<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>堆叠柱状图-2（多堆叠）</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/* 
有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。
顾名思义，堆叠柱状图就是一个系列的数值“堆叠”在另一个系列上，因而从他们的高度总和就能表达总量的变化。

使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组。
*/

// 指定图表的配置项和数据
var option = {
	xAxis: {
		data: ['A', 'B', 'C', 'D', 'E']
	},
	yAxis: {},
	series: [
		{
			data: [10, 22, 28, 43, 49],
			type: 'bar',
			stack: 'str1'
		},
		{
			data: [5, 4, 3, 5, 10],
			type: 'bar',
			stack: 'str1'
		},
		
		{
			data: [15, 24, 35, 15, 25],
			type: 'bar',
			stack: 'str2'
		},
		{
			data: [15, 14, 13, 9, 19],
			type: 'bar',
			stack: 'str2'
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
